<template>
	<view class="box">
		<view class="top">
			<u-navbar :is-back="true" title="积分商城"></u-navbar>
		</view>
		<view class="tabs flc container_br">
			<view class="left flc">
				<u-icon :name="'/static/icons/wdjf.png'" size="32"></u-icon>
				<span class="ml2">我的积分</span>
			</view>
			<view class="right flc" @click="goMyChange">
				<u-icon :name="'/static/icons/wddh.png'" size="32"></u-icon>
				<span class="ml2">我的兑换</span>
			</view>
		</view>
		<view class="pointGoods">
			<view class="title">
				积分兑换区
			</view>
			<view class="goodsList jsbw">
				<view class="item card_p" v-for="(item,index) in list" :key="index" @click="goPage">
					<view class="img">
						<u-image width="345rpx" height="345rpx" :lazy-load="true" src="/static/home/example.png"></u-image>
					</view>
					<view class="info">
						<view class="name">
							商品名称商品名称
							商品名称商品名称
							商品名称商品名称
						</view>
						<view class="num_btn mtb2 jsbc ">
							<view class="num  point cxc fz32">
								12680积分
							</view>
							<view class="btn">
								去兑换
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[{},{},{},{},{}]
			};
		},
		methods:{
			goPage(){
				uni.navigateTo({
					url:'/page/pointDetail/pointDetail'
				})
			},
			goMyChange(){
				uni.navigateTo({
					url:'/page/mychange/mychange'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs{
		justify-content: space-around;
		align-items: center;
		height: 120rpx;
	}
	.pointGoods{
		width: 750rpx;
		box-sizing: border-box;
		padding: 20rpx;
		.btn{
			width: 96rpx;
			height: 50rpx;
			background: linear-gradient(90deg, #FD4120, #F47749);
			border-radius: 25rpx;
			font-size: 22rpx;
			color: #FFFFFF;
			line-height: 50rpx;
		}
	}

</style>
